<template>
    <a-modal v-model:visible="visible" :closable="false" :width="800" :wrap-style="{ overflow: 'hidden' }"
        @cancel="cancel" @ok="ok">
        <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
            <a-row :gutter="24">

                <a-col :span="16">
                    <a-form-item name="name">
                        <a-input v-model:value="searchFormState.name" placeholder="请输入检索条件" />
                    </a-form-item>
                </a-col>

                <a-col :span="8" class="text-right">
                    <a-button type="primary" @click="refresh(true)">查询</a-button>
                </a-col>
            </a-row>
        </a-form>
        <s-table ref="tableRef" tableLayout="fixed" :customRow="onselectRow" :row-selection="{
        type: 'radio',
        selectedRowKeys: selectedRowKeys, onChange: onSelectChange
    }" :size="5" :data="loadData" bordered :columns="columns" class="mb-2">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    {{ index + 1 }}
                </template>


                <template v-if="column.key === 'status'">
                    <div :style="{ 'background-color': getColorByValue(record.status) }"
                        class=" w-20 rounded text-center text-white">
                        <!-- {{ progressOptions.find(item => item.value === record.status)?.label }} -->
                    </div>
                </template>

            </template>
        </s-table>
    </a-modal>
</template>
<script setup>
import pmApi from '@/api/pm/pm/index'
import { progressOptions } from '@/utils/constants.js'
import { ref } from 'vue';
const tableRef = ref()
const props = defineProps({
    value: {
        type: Array,
    },
})
const selectedRowKeys = ref([])

const test = () => {
    selectedRowKeys.value = ['1775007903914221570']
    tableRef.value.refresh(true)

}
const getColorByValue = (value) => {
    if (value == null) {
        return "red";
    }
    const target = progressOptions.find(item => item.value === value);
    return target ? target.color : 'gray';
}
const searchFormState = ref({})

const loadData = (parameter) => {
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size


    return pmApi.proinfopage(searchFormState.value).then((res) => {
        return res
    })
}

const visible = ref(false)
const show = () => {
    nextTick(() => {
        visible.value = true
        console.log("nextTick",props.value)
        if (props.value) {
            selectedRowKeys.value = []
            selectedRowKeys.value = props.value.map((item) => {
                return item.id
            })
            selectRecords.value = props.value
            tableRef.value.updateSelect(selectedRowKeys, props.value)
        }
    })
}


const selectRecords = ref({})
const onSelectChange = (selectedKeys, selectedRows) => {
    selectedRowKeys.value = selectedKeys;
    selectRecords.value = selectedRows
}
const onselectRow = (columns, index) => {
    return {
        onClick: (event) => {
            console.log('onselectRow clicked', columns, index);
            selectedRowKeys.value = [columns["key"]]
        },
    }
}

const emits = defineEmits(['onClose'])
const ok = () => {
    visible.value = false;
    emits('onClose', selectedRowKeys.value, selectRecords.value)
};
const cancel = () => {
    visible.value = false;
};
const getDefaultValue = () => {
    return new Promise((resolve, reject) => {
        pmApi.proinfopage({ page: 1, size: 10 }).then((res) => {
            resolve(res.records)
            return
        })
    })
}
defineExpose({
    show,
    getDefaultValue
});

const refresh = () => {
    tableRef.value.refresh(true)
}
const columns = [

    {
        title: '项目编号',
        dataIndex: 'code',
        key: 'code',
        width: 160,
        align: "center",
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        width: 200,
        align: "center",
    },
    {
        title: '业主名称',
        dataIndex: 'custom',
        key: 'custom',
        width: 160,
        align: "center",
    },
    {
        title: '立项时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: "center",
    },

    // {
    //     title: '项目状态',
    //     dataIndex: 'status',
    //     key: 'status',
    //     width: 120,
    //     align: "center",
    // },


]

</script>